<template>
  <div id="permission">
    <el-header class="main-head">
      <el-row type="flex" class="row-bg" justify="end">
        <el-button v-if="$store.state.buttons['admin/per/save']" type="primary" icon="el-icon-plus" @click="add()">
          添加菜单组
        </el-button>
        <el-button v-if="$store.state.buttons['admin/per/list']" type="info" icon="el-icon-refresh" @click="queryList(1)">
          刷新
        </el-button>
      </el-row>
    </el-header>

    <el-main class="app-main">
      <el-table :data="result" :height="$store.state.sizes.tableHei" :row-class-name="rowClass" row-key="id" border
        :tree-props="{children: 'children'}">
        <el-table-column prop="name" label="权限名称" min-width="200" fixed="left" />
        <el-table-column prop="id" label="权限编号" min-width="220" />
        <el-table-column label="菜单图标" min-width="80">
          <template slot-scope="scope">
            <i :class="scope.row.desc" />
          </template>
        </el-table-column>
        <el-table-column prop="perLevel" label="权限级别" min-width="80" :formatter="(row,column,value) => getValue('per_level',value)" />
        <el-table-column prop="perOrder" label="排序优先级" min-width="80" />
        <el-table-column label="权限状态" min-width="80">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.perStatus=='A'" size="medium">
                启用
              </el-tag>
              <el-tag v-if="scope.row.perStatus=='H'" size="medium" type="info">
                专用
              </el-tag>
              <el-tag v-if="scope.row.perStatus=='I'" size="medium" type="danger">
                禁用
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="perContent" label="权限内容" min-width="230" />
        <el-table-column label="操作" width="270" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="$store.state.buttons['admin/per/update']" size="mini" type="primary" @click="modify(scope.row)">
              修改
            </el-button>
            <el-button v-if="$store.state.buttons['admin/per/delete']" size="mini" type="danger" @click="delate(scope.row)">
              删除
            </el-button>
            <el-button v-if="$store.state.buttons['admin/per/save'] && scope.row.perLevel != 'action'" size="mini" type="success"
              @click="add(scope.row)">
              添加子权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-dialog :title="(flag.add ? '添加':'修改')+'权限'" :visible.sync="flag.modify" :close-on-click-modal="false" top="15vh"
      width="30%" @keydown.enter.native="confirm()">
      <el-form ref="update" class="full-item-form" label-width="100px" :rules="rules" :model="param">
        <el-form-item label="权限编号" prop="id">
          <el-input v-model="param.id" :disabled="!flag.add" />
        </el-form-item>
        <el-form-item label="父权限">
          <el-input v-model="param.perParent" disabled="disabled" />
        </el-form-item>
        <el-form-item label="权限级别">
          <el-select v-model="param.perLevel" placeholder="请选择" disabled>
            <el-option v-for="(val, key, i) in $store.state.dict.per_level" :key="key" :value="key" :label="val" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="param.name" />
        </el-form-item>
        <el-form-item label="权限内容">
          <el-input v-model="param.perContent" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-select v-model="param.desc" placeholder="请选择">
            <el-option v-for="item in iconsArr" :key="item" :value="item">
              <span style="float: left; color: #8492a6; font-size: 16px; margin-right:20px;">
                <i :class="item" />
              </span>
              <span style="float: left">{{ item }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序优先级">
          <el-select v-model="param.perOrder" placeholder="请选择">
            <el-option v-for="index in order" :key="index" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限状态" prop="dictStatus">
          <el-select v-model="param.perStatus" placeholder="请选择">
            <el-option v-for="(val, key, i) in $store.state.dict.active_status" :key="key" :value="key" :label="val" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="flag.modify = false"> 取 消（Esc） </el-button>
        <el-button type="primary" @click="confirm"> 确 定（Enter） </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop,
    Watch
  } from 'vue-property-decorator'
  import element from '@/static/plugins/element'

  @Component
  export default class Permission extends Vue {
    urls = {
      list: 'admin/per/list',
      save: 'admin/per/save',
      update: 'admin/per/update',
      del: 'admin/per/delete'
    };

    rules = {
      id: [{required: true,message:'请输入权限编号',trigger: 'blur'}],
      name: [{required: true,message:'请输入权限名称',trigger: 'blur'}]
    };
    iconsArr = element.icons;
    order = 99;
    nodeLevel = {
      module: 'group',
      group: 'view',
      view: 'action'
    };
    example = {page:1,size:10};

    result = [];
    param = {};
    flag = {
      modify: false,
      add: false
    };

    queryList(page) {
      if (page != null) {
        this.example.page = page
      }
      const that = this
      this.$get(this.urls.list, this.example).then(rsp => {
        that.result = rsp
      })
    }

    rowClass(data) {
      return data.row.perLevel + '-row'
    }

    modify(row) {
      if (this.$refs.update != null) {
        this.$refs.update.clearValidate()
      }
      this.flag.add = false
      this.param = JSON.parse(JSON.stringify(row))
      this.flag.modify = true
    }

    add(row) {
      if (this.$refs.update != null) {
        this.$refs.update.clearValidate()
      }
      this.flag.add = true
      this.param = {
        perStatus: 'A'
      }
      if (row == null) {
        this.param.perLevel = 'group'
      } else {
        this.param.perParent = row.id
        this.param.perLevel = this.nodeLevel[row.perLevel]
      }
      this.flag.modify = true
    }

    delate(row) {
      const that = this
      this.$confirm('确定要删除权限‘' + row.name + '’吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$post(that.urls.del, row).then(function(response) {
          if (response) {
            that.queryList()
          }
        })
      }).catch(() => {
        showMessage('info', '已取消删除')
      })
    }

    confirm() {
      const that = this
      this.$refs.update.validate((valid) => {
        if (valid) {
          let url = that.urls.update
          if (that.flag.add) {
            url = that.urls.save
          }
          delete that.param.children
          that.$post(url, that.param).then(function(response) {
            if (response) {
              that.queryList()
              that.flag.modify = false
            }
          })
        } else {
          return false
        }
      })
    }

    getValue(dictKey, value) {
      const dict = this.$store.state.dict[dictKey]
      if (dict == null) {
        return ''
      }
      return dict[value] == null ? value : dict[value]
    }

    created() {
      this.queryList()
      this.$store.commit('getDictMap', ['per_level', 'active_status'])
      this.$store.commit('getActionPers', 'permission')
    }

    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style>
  #permission {
    padding: 20px 20px 0px 20px;
  }

  .module-row {
    background-color: #ecf5ff !important;
  }

  .group-row {
    background-color: #f0f9eb !important;
  }

  .view-row {
    background-color: oldlace !important;
  }

  .action-row {
    background-color: #c5f9e6 !important;
  }
</style>
